<template>
  <div class="points-container">
    <div class="points-header">
      <h2>会员积分中心</h2>
      <div class="user-points-card" v-if="isLoggedIn">
        <div class="points-balance">
          <span class="balance-label">当前积分</span>
          <span class="balance-value">{{ userPoints }} 积分</span>
        </div>
        <div class="points-rank">
          <span class="rank-label">会员等级</span>
          <span class="rank-value">{{ userRank }}</span>
        </div>
      </div>
      <div class="login-prompt" v-else>
        <p>请先登录查看您的积分信息</p>
        <router-link to="/login" class="login-btn">立即登录</router-link>
      </div>
    </div>

    <!-- 积分兑换区 -->
    <div class="redemption-section" v-if="isLoggedIn">
      <h3>积分兑换</h3>
      <div class="items-grid">
        <div class="redemption-item" v-for="item in redemptionItems" :key="item.id">
          <div class="item-image">
            <img :src="item.imageUrl" :alt="item.name">
          </div>
          <div class="item-info">
            <h4 class="item-name">{{ item.name }}</h4>
            <p class="item-description">{{ item.description }}</p>
            <div class="item-points">所需积分: {{ item.points }} 积分</div>
            <button 
              class="redeem-btn"
              :disabled="userPoints < item.points || !item.available"
              @click="handleRedeem(item)"
            >
              {{ userPoints < item.points ? '积分不足' : (item.available ? '立即兑换' : '已兑完') }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 积分历史 -->
    <div class="points-history" v-if="isLoggedIn && pointsHistory.length > 0">
      <h3>积分历史</h3>
      <div class="history-table">
        <div class="history-header">
          <div class="history-date">日期</div>
          <div class="history-description">描述</div>
          <div class="history-points">积分变动</div>
        </div>
        <div class="history-row" v-for="record in pointsHistory" :key="record.id">
          <div class="history-date">{{ formatDate(record.date) }}</div>
          <div class="history-description">{{ record.description }}</div>
          <div class="history-points" :class="record.points > 0 ? 'points-gain' : 'points-loss'">{{ record.points > 0 ? '+' : '' }}{{ record.points }}</div>
        </div>
      </div>
    </div>

    <!-- 兑换成功提示 -->
    <div class="success-modal" v-if="showSuccessModal">
      <div class="modal-content">
        <h3>兑换成功！</h3>
        <p>您已成功兑换 <strong>{{ selectedItem.name }}</strong></p>
        <p>扣除积分: {{ selectedItem.points }} 积分</p>
        <p>剩余积分: {{ userPoints - selectedItem.points }} 积分</p>
        <p>兑换码: <span class="redeem-code">{{ generateRedeemCode() }}</span></p>
        <p>请凭此兑换码前往指定地点兑换实物商品</p>
        <button @click="showSuccessModal = false" class="ok-btn">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';


// 状态管理
const store = useStore();
const showSuccessModal = ref(false);
const selectedItem = ref(null);

// 用户积分数据
const userPoints = ref(1500); // 模拟数据
const userRank = ref('白银会员'); // 模拟数据

// 积分兑换商品
const redemptionItems = ref([
  {
    id: 1,
    name: '羽毛球拍线',
    description: '专业羽毛球拍线，耐打型',
    points: 500,
    available: true,
    imageUrl: 'https://images.unsplash.com/photo-1551361415-012e42a34764?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 2,
    name: '羽毛球',
    description: '12只装高级训练羽毛球',
    points: 300,
    available: true,
    imageUrl: 'https://images.unsplash.com/photo-1556016531-9f4c89414320?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 3,
    name: '运动毛巾',
    description: '吸汗速干运动毛巾',
    points: 200,
    available: true,
    imageUrl: 'https://images.unsplash.com/photo-1597224645995-8e6d2018525b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  },
  {
    id: 4,
    name: '场地体验券',
    description: '免费场地1小时体验券',
    points: 800,
    available: false,
    imageUrl: 'https://images.unsplash.com/photo-1518492104633-130d0cc84637?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
  }
]);

// 积分历史记录
const pointsHistory = ref([
  { id: 1, date: '2023-09-15', description: '发布社区帖子', points: 50 },
  { id: 2, date: '2023-09-10', description: '二手交易成功', points: 200 },
  { id: 3, date: '2023-09-05', description: '场地预约消费', points: -100 },
  { id: 4, date: '2023-08-28', description: '每日签到', points: 10 },
  { id: 5, date: '2023-08-20', description: '首次登录', points: 1000 }
]);

// 检查登录状态
const isLoggedIn = computed(() => store.getters.isLoggedIn);

onMounted(() => {
  // 在实际应用中，这里应该从服务器获取用户积分数据
  if (isLoggedIn.value) {
    console.log('获取用户积分数据');
  }
});

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN');
};

// 处理兑换
const handleRedeem = (item) => {
  if (userPoints.value < item.points) return;
  if (!item.available) return;

  selectedItem.value = item;
  showSuccessModal.value = true;

  // 在实际应用中，这里应该调用API完成兑换
  // 并更新用户积分
  // userPoints.value -= item.points;
};

// 生成兑换码
const generateRedeemCode = () => {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
  let code = '';
  for (let i = 0; i < 8; i++) {
    code += chars.charAt(Math.floor(Math.random() * chars.length));
    if (i === 3) code += '-';
  }
  return code;
};
</script>

<style scoped>
.points-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.points-header {
  margin-bottom: 2rem;
}

.points-header h2 {
  color: #2196F3;
  margin-top: 0;
}

.user-points-card {
  background: linear-gradient(135deg, #e3f2fd 0%, #e8f5e9 100%);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.points-balance {
  text-align: center;
}

.balance-label {
  display: block;
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.balance-value {
  font-size: 2rem;
  font-weight: bold;
  color: #2196F3;
}

.points-rank {
  text-align: center;
}

.rank-label {
  display: block;
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.rank-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #4CAF50;
}

.login-prompt {
  text-align: center;
  padding: 3rem;
  background-color: #f9f9f9;
  border-radius: 12px;
}

.login-prompt p {
  color: #666;
  margin-bottom: 1.5rem;
}

.login-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}

.redemption-section h3,
.points-history h3 {
  color: #2196F3;
  border-bottom: 2px solid #e3f2fd;
  padding-bottom: 0.5rem;
  margin-top: 2rem;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.redemption-item {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.redemption-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.item-image {
  height: 180px;
  overflow: hidden;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  padding: 1rem;
}

.item-name {
  color: #333;
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

.item-description {
  color: #666;
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
  height: 40px;
  overflow: hidden;
}

.item-points {
  color: #4CAF50;
  font-weight: 500;
  margin-bottom: 1rem;
}

.redeem-btn {
  width: 100%;
  padding: 0.6rem;
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.redeem-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.history-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  margin-top: 1.5rem;
}

.history-header {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  background-color: #e3f2fd;
  padding: 1rem;
  font-weight: bold;
  color: #2196F3;
}

.history-row {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  padding: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.history-row:last-child {
  border-bottom: none;
}

.points-gain {
  color: #4CAF50;
  font-weight: 500;
}

.points-loss {
  color: #f44336;
  font-weight: 500;
}

/* 成功提示模态框 */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  width: 90%;
  max-width: 400px;
}

.modal-content h3 {
  color: #4CAF50;
  margin-top: 0;
}

.redeem-code {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #f5f5f5;
  border-radius: 6px;
  font-family: monospace;
  font-size: 1.2rem;
  margin: 0.5rem 0;
  letter-spacing: 2px;
}

.ok-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 1rem;
}
</style>